<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  
  
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>
    面向对象的CSS样式 |
    
    无敌小笼包</title>
  
    <link rel="shortcut icon" href="/favicon.png">
  
  <link rel="stylesheet" href="/css/style.css">
  
    <link rel="stylesheet" href="/fancybox/jquery.fancybox.min.css">
  
  <script src="/js/pace.min.js"></script>
</head>

<body>
<main class="content">
  <section class="outer">
  <article id="post-OOCSS" class="article article-type-post" itemscope itemprop="blogPost">

  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h1 class="article-title" itemprop="name">
      面向对象的CSS样式
    </h1>
  

      </header>
    

    
      <div class="article-meta">
        <a href="/2016/02/27/OOCSS/" class="article-date">
  <time datetime="2016-02-27T06:11:20.000Z" itemprop="datePublished">2016-02-27</time>
</a>
        
  <div class="article-category">
    <a class="article-category-link" href="/categories/HTML/">HTML</a>
  </div>

      </div>
    

    <div class="article-entry" itemprop="articleBody">
      
      
      
        <p>　　<strong> OOCSS:</strong>面向对象的CSS样式，通过对CSS样式的合理规范，重复使用，达到代码的精简，便于换肤。<br><a id="more"></a></p>
<h3 id="作用："><a href="#作用：" class="headerlink" title="作用："></a>作用：</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div></pre></td><td class="code"><pre><div class="line">1. 加强代码复用以便方便维护</div><div class="line">1. 减少CSS体积</div><div class="line">1. 提升渲染效率</div><div class="line">1. 组件库思想、栅格布局可共用、减少选择器、方便扩展</div></pre></td></tr></table></figure>
<h3 id="注意事项："><a href="#注意事项：" class="headerlink" title="注意事项："></a>注意事项：</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div></pre></td><td class="code"><pre><div class="line">1. 不要直接定义子节点，应把共性声明放到父类</div><div class="line"></div><div class="line">.mod .inner&#123;&#125; //</div><div class="line"></div><div class="line">1. 结构和皮肤相分离</div><div class="line">1. 容器和内容相分离</div><div class="line">1. 抽象出可重用的元素，建好组件库，在组件库内寻找可用的元素组装页面</div><div class="line">1. 往你想要扩展的对象本身添加Class，而不是他的父节点</div><div class="line">1. 对象应保持独立性</div><div class="line">1. 避免使用ID选择器，权重太高，无法重用</div><div class="line">1. 避免位置相关的样式</div><div class="line">1. 保证选择器相同的权重</div><div class="line">1. 类名：简短、清晰、语义化、OOCSS的名字并不影响HTML语义化</div></pre></td></tr></table></figure>
<h3 id="拓展"><a href="#拓展" class="headerlink" title="拓展"></a>拓展</h3><p><a href="http://oocss.org" title="面向对象的CSS网站" target="_blank" rel="noopener">OOCSS</a></p>
<p><a href="htto://meyerweb.com/eric/tools/css/reset/" target="_blank" rel="noopener">Reset</a></p>
<blockquote>
<p>优点：样式初始化设置非常全面<br>缺点：设置了部分多余的设置，border</p>
</blockquote>
<p><a href="http://github.com/necolas/normalize.css" target="_blank" rel="noopener">Normalize</a></p>
<blockquote>
<p>优点：<br>缺点：有些默认的没有设置</p>
</blockquote>
<p><a href="http://thx.github.io/cube/doc/neat/" target="_blank" rel="noopener">Neat.css</a></p>
<blockquote>
<p>优点：</p>
<ol>
<li>解决Bug，低级浏览器常见Bug</li>
<li>统一效果，但不盲目追求重置为0</li>
<li>向后兼容</li>
<li>考虑响应式</li>
<li>考虑移动设备</li>
</ol>
<p>缺点：</p>
</blockquote>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://blog.mango16.cc/2016/02/27/OOCSS/" data-id="cjrbtw1xi00056d8h7mtaac84"
         class="article-share-link">分享</a>
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/CSS/">CSS</a></li></ul>

    </footer>

  </div>

  
    
  <nav class="article-nav">
    
      <a href="/2016/05/05/php画图形/" class="article-nav-link">
        <strong class="article-nav-caption">前一篇</strong>
        <div class="article-nav-title">
          
            PHP 画图形 N行N列
          
        </div>
      </a>
    
    
      <a href="/2016/01/27/Ajax/" class="article-nav-link">
        <strong class="article-nav-caption">后一篇</strong>
        <div class="article-nav-title">Ajax学习计划</div>
      </a>
    
  </nav>


  

  
    
  <div class="gitalk" id="gitalk-container"></div>
  <link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
  <script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>
  <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
  <script type="text/javascript">
      var gitalk = new Gitalk({
        clientID: 'caba8826a61790936307',
        clientSecret: '09a15037dcab30d9adf35a53ec6961939169f797',
        repo: 'm9rco.github.io',
        owner: 'm9rco',
        admin: ['m9rco'],
        // id: location.pathname,      // Ensure uniqueness and length less than 50
        id: md5(location.pathname),
        distractionFreeMode: false  // Facebook-like distraction free mode
      })

  gitalk.render('gitalk-container')
  </script>

  

</article>



</section>
  <footer class="footer">
  
  <div class="outer">
    <ul class="list-inline">
      <li>&copy; 2019 无敌小笼包</li>
      <i class="pulse"></i>
    </ul>
  </div>
</footer>

</main>
<aside class="sidebar">
  <button class="navbar-toggle"></button>

<nav class="navbar">
  
    <div class="logo">
      <a href="/"><img src="/images/hexo.svg" alt="无敌小笼包"></a>
    </div>
  
  <ul class="nav nav-main">
    
      <li class="nav-item">
        <a class="nav-item-link" href="/">主页</a>
      </li>
    
      <li class="nav-item">
        <a class="nav-item-link" href="/archives">归档</a>
      </li>
    
      <li class="nav-item">
        <a class="nav-item-link" href="/gallery">相册</a>
      </li>
    
      <li class="nav-item">
        <a class="nav-item-link" href="/nagging">叽咕</a>
      </li>
    
      <li class="nav-item">
        <a class="nav-item-link" href="/about">关于</a>
      </li>
    
    <li class="nav-item">
      <a class="nav-item-link nav-item-search" title="Search">
        <i class="fe fe-search"></i>
        搜索
      </a>
    </li>
  </ul>
</nav>

<nav class="navbar navbar-bottom">
  <ul class="nav">
    <li class="nav-item">
      
        <a class="nav-item-link" target="_blank" href="/atom.xml" title="RSS Feed">
          <i class="fe fe-feed"></i>
        </a>
      
    </li>
  </ul>
</nav>

<div class="search-form-wrap">
  <div class="local-search local-search-plugin">
  <input type="search" id="local-search-input" class="local-search-input" placeholder="Search...">
  <div id="local-search-result" class="local-search-result"></div>
</div>
</div>
</aside>
  <script src="/js/jquery-2.0.3.min.js"></script>
<script src="/js/lazyload.min.js"></script>


  <script src="/fancybox/jquery.fancybox.min.js"></script>



  <script src="/js/search.js"></script>


<script src="/js/ocean.js"></script>

</body>
</html>